<template>
  <a-modal
    title="员工信息"
    okText="确定"
    cancelText="取消"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="入职日期">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['entryDate',{ rules: [{ required: true, message: '请输入入职日期' }] }]"
                placeholder="请输入入职日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账号">
              <a-input placeholder="请输入账号" v-decorator="['username',{ rules: [{ required: true, message: '请输入账号' }] }]" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="工作状态">
              <a-select @change="statusChange" placeholder="请选择工作状态" v-decorator="['workStatus',{ rules: [{ required: true, message: '请选择工作状态' }] }]">
                <a-select-option value="1">实习
                </a-select-option>
                <a-select-option value="2">试用
                </a-select-option>
                <a-select-option value="3">在职
                </a-select-option>
                <a-select-option value="4">离职
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-show="isDepart">
            <a-form-item label="离职意愿">
              <a-input placeholder="请输入离职意愿" v-decorator="['departureDesire',{ rules: [{ required: false, message: '请输入离职意愿' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-show="isDepart">
            <a-form-item label="离职去向">
              <a-input placeholder="请输入离职去向" v-decorator="['whereabouts',{ rules: [{ required: false, message: '请输入离职去向' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-show="isDepart" >
            <a-form-item label="离职日期">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['departureDate',{ rules: [{ required: false, message: '请输入离职日期' }] }]"
                placeholder="请输入离职日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="毕业院校">
              <a-input placeholder="请输入毕业院校" v-decorator="['graduateSchool',{ rules: [{ required: false, message: '请输入毕业院校' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="毕业时间">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['graduateDate',{ rules: [{ required: false, message: '请输入毕业时间' }] }]"
                placeholder="请输入毕业时间" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="专业技能">
              <a-input placeholder="请输入专业技能" v-decorator="['profession',{ rules: [{ required: false, message: '请输入账号' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="员工等级">
              <a-select placeholder="请选择员工等级" v-decorator="['grade',{ rules: [{ required: true, message: '请选择员工等级' }] }]">
                <a-select-option value="A1">A1
                </a-select-option>
                <a-select-option value="A2">A2
                </a-select-option>
                <a-select-option value="A3">A3
                </a-select-option>
                <a-select-option value="A4">A4
                </a-select-option>
                <a-select-option value="A5">A5
                </a-select-option>
                <a-select-option value="A6">A6
                </a-select-option>
                <a-select-option value="A7">A7
                </a-select-option>
                <a-select-option value="A8">A8
                </a-select-option>
                <a-select-option value="A9">A9
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-decorator="['name',{ rules: [{ required: true, message: '请输入姓名' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码">
              <a-input
                v-decorator="['password',{ rules: [{ required: true, message: '请输入密码' }] }]"
                placeholder="请输入密码" />
            </a-form-item>
          </a-col>
          <!-- </a-row>
        <a-row :gutter="24"> -->
          <a-col :span="12">
            <a-form-item label="性别">
              <a-select placeholder="请选择性别" v-decorator="['sex',{ rules: [{ required: true, message: '请选择性别' }] }]">
                <a-select-option value="0">男
                </a-select-option>
                <a-select-option value="1">女
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="部门">
              <a-input placeholder="请输入部门" v-decorator="['department',{ rules: [{ required: true, message: '请输入部门' }] }]" />
            </a-form-item>
          </a-col>
          <!-- </a-row>
        <a-row :gutter="24"> -->
          <a-col :span="12">
            <a-form-item label="岗位">
              <a-input placeholder="请输入岗位" v-decorator="['jobs',{ rules: [{ required: true, message: '请输入岗位' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系方式">
              <a-input placeholder="请输入联系方式" v-decorator="['mobile',{ rules: [{ required: true, message: '请输入联系方式' }] }]">
              </a-input>
            </a-form-item>
          </a-col>
          <!-- </a-row>
        <a-row :gutter="24"> -->
          <a-col :span="12">
            <a-form-item label="身份证号">
              <a-input placeholder="请输入身份证号" v-decorator="['idCard',{ rules: [{ required: true, message: '请输入身份证号' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="出生日期">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['birthDate',{ rules: [{ required: true, message: '请输入出生日期' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="角色">
              <a-select
                mode="multiple"
                v-decorator="['roleIdList',{ rules: [{ required: true, message: '请选择角色' }] }]"
                placeholder="请选择角色">
                <a-select-option
                  v-for="i in roloIdMap"
                  :key="i.roleId">
                  {{ i.roleName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="紧急联系人">
              <a-input placeholder="请输入紧急联系人" v-decorator="['emergencyContact',{ rules: [{ required: true, message: '请输入紧急联系人' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="紧急联系人方式">
              <a-input placeholder="请选紧急联系人方式" v-decorator="['emergencyContactWay',{ rules: [{ required: true, message: '请输入紧急联系人方式' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="配偶姓名">
              <a-input placeholder="请输入配偶姓名" v-decorator="['spouseName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="配偶联系方式">
              <a-input placeholder="请输入配偶联系方式" v-decorator="['spouseContactWay']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="父亲姓名">
              <a-input placeholder="请输入父亲姓名" v-decorator="['fatherName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="父亲联系方式">
              <a-input placeholder="请输入父亲联系方式" v-decorator="['fatherContactWay']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="母亲姓名">
              <a-input placeholder="请输入母亲姓名" v-decorator="['motherName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="母亲联系方式">
              <a-input placeholder="请输入母亲联系方式" v-decorator="['motherContactWay']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="兴趣爱好">
              <a-input placeholder="请输入兴趣爱好" v-decorator="['hobbies']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input placeholder="请输入备注" v-decorator="['note']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = [
  'id',
  'entryDate',
  'staffName',
  'sex',
  'department',
  'jobs',
  'mobile',
  'idCard',
  'birthDate',
  'emergencyContact',
  'emergencyContactWay',
  'spouseName',
  'spouseContactWay',
  'fatherName',
  'fatherNameContactWay',
  'fatherNameContactWay',
  'motherName',
  'motherContactWay',
  'hobbies',
  'note'
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    roloIdMap: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      isDepart: false
    }
  },
  methods: {
    statusChange (val) {
      if (val === '4') {
        this.isDepart = true
      }
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  }
}
</script>
